/**
 * 实现：根据message.vue渲染消息提示
 *  将组件渲染到body中
 */

  import {
    createVNode,
    render
  } from "vue"

  // 1. 导入组件
  import Message from "./message.vue"

  // 3. 准备一个DOM容器
  const div = document.createElement('div')
  div.setAttribute('class', 'message-container')
  document.body.appendChild(div)



  export default ({
    type,
    text
  }) => {

    // 2. 根据组件创建虚拟节点 --createVNode(组件,属性)
    const VNode = createVNode(Message, {
      type,
      text
    })

    // 4. 把虚拟节点渲染到指定的DOM容器中
    render(VNode, div)
    clearTimeout(timer)

    // 5. 开启定时，移出DOM容器内容
    const timer = setTimeout(() => {
      //渲染空到dom容器中
      render(null, div)
    }, 3000)
  }